<template>
  <div>
    <el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="open()" v-if="!disabled">
      选择数字员工
    </el-button>
    <div style="margin-bottom: 10px;">
      <div v-for="(item, index) in value" :key="index">
        {{ item.weUserName }}
        <el-button size="mini" type="text" @click="value.splice(index, 1)">删除</el-button>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择数字员工" width="700px">
      <NormalForm :formList="formList" :isShowCard="false"
                  :operateForm="queryForm" @handleReset="handleReset" @specialSearch="handleQuery"></NormalForm>
      <el-table ref="multipleTable" v-loading="loading" :data="tableList" height="442px"
                style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectAll">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="员工" min-width="180px" prop="weUserName"
                         show-overflow-tooltip></el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="在线状态" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '忙碌'" type="warning">忙碌
            </el-tag>
            <el-tag v-if="scope.row.status == '在线'" type="success">在线
            </el-tag>
            <el-tag v-if="scope.row.status == '离线'" type="info">离线</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {queryLeadCoe} from "@/api/intelligentOutCall";

export default {
  name: 'checkDigitalEmployee',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    isSingleOption: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      visible: false,
      queryForm: {
        name: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '搜索员工',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
          xl: 8,
          lg: 10,
        },
      ],
      loading: false,
      total: 0,
      tableList: [],
      checkedList: [],
      drainageOpt: {},
    }
  },
  methods: {
    open() {
      this.handleQuery();
      this.visible = true;
      this.checkedList = JSON.parse(JSON.stringify(this.value))
    },
    ok() {
      console.log('点击这里', this.value, this.checkedList)
      this.value.splice(0, this.value.length)
      this.value.push(...this.checkedList);
      this.visible = false;
      this.$emit('change', this.value)
    },
    handleSelectionChange(selection, val) {
      console.log(selection, val, this.isSingleOption, '123456765')
      if(this.isSingleOption){
        this.$refs.multipleTable.clearSelection();
        if (selection.length == 0) {
          this.selectedRow = [];  // 清空data中绑定的selectedRow
          return
        };
        // 切换最近一次选择数据的状态
        this.$refs.multipleTable.toggleRowSelection(val, true);
        // 更新data中的selectedRow
        this.checkedList = [{...val}];
        // console.log(val);
      }else{
        this.checkedList = selection;
      }
    },
    handleSelectAll(valList){
      if(this.isSingleOption){
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item => item.id == this.checkedList[0].id)[0], true);
      }else{
        this.checkedList = valList
      }
    },
    // 重置
    handleReset() {
      this.queryForm = {
        name: "",
      };
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      console.log(this.queryForm, 'queryForm')
      let obj = {
        ...this.queryForm,
      };
      this.loading = true;
      this.checkedList = []
      queryLeadCoe(obj).then((res) => {
        console.log(res, 'res')
        if (res.code === 200) {
          this.tableList = res.data || [];
          this.$nextTick(() => {
            if (this.value.length > 0 && this.tableList.length > 0) {
              this.value.forEach(item => {
                this.tableList.forEach(element => {
                  console.log(element, item, 'element-item')
                  if (element.id == item.id) {
                    console.log(element.linkId, item.linkId);
                    this.$refs.multipleTable.toggleRowSelection(element);
                  }
                })
              })
            }
          })
          this.total = res.total || 0;
        }
      }).finally(() => this.loading = false);
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #14D595 !important;
  color: #06c160 !important;
}

::v-deep.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

::v-deep.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}

::v-deep.el-tag.el-tag--warning {
  background-color: rgba(255, 173, 58, 0.1) !important;
  border-color: #FFAD3A !important;
  color: #FFAD3A !important;
}
</style>
